<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <!-- vue2 -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" size="small"  @click="showSpeed = true">速度</el-button>
            <el-button type="info" size="small"  @click="showZoom = true">设置最大缩放距离</el-button>
            <el-button type="info" size="small"  @click="cancelKm">取消最大缩放距离</el-button>
            <!-- <el-button type="info" size="small"  @click="rotationRange">设置旋转范围</el-button>
            <el-button type="info" size="small"  @click="cancelRange">取消旋转范围</el-button> -->
        </div>
        <el-card class="box-card" v-show="showSpeed">
            <div slot="header" class="clearfix">
              <span>设置速度</span>
              <el-button class="close-btn" type="text" @click="showSpeed = false">×</el-button>
            </div>
            <div class="card-container">
                <el-form 
                    ref="formSpeed" 
                    :model="formSpeed" 
                    label-width="100px"
                >
                    <el-form-item label="旋转速度：">
                        <el-input v-model.number="formSpeed.spin"></el-input>
                    </el-form-item>
                    <el-form-item label="缩放速度：">
                        <el-input v-model.number="formSpeed.zoom"></el-input>
                    </el-form-item>
                </el-form>
                <div class="modal-footer">
                    <el-button size="small" type="primary" @click="submitSpeed">确认</el-button>
                </div>
            </div>
        </el-card>
        <el-card class="box-card" v-show="showZoom">
            <div slot="header" class="clearfix">
              <span>设置</span>
              <el-button class="close-btn" type="text" @click="showSpeed = false">×</el-button>
            </div>
            <div class="card-container">
                <el-form 
                    ref="formZoom" 
                    :model="formZoom" 
                    label-width="110px"
                >
                    <el-form-item label="最大缩放距离：">
                        <el-input v-model.number="formZoom.maxZoom"></el-input>
                    </el-form-item>
                </el-form>
                <div class="modal-footer">
                    <el-button size="small" type="primary" @click="submitDIST">确认</el-button>
                </div>
            </div>
        </el-card>
        <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
    </div>
    <script id="viewerStartup" type="module">
        const vm = new Vue({
            el: '#app',
            data: {
                bimViewer: null,
                showSpeed: false,
                showZoom: false,
                formSpeed: {
                    spin: 5,
                    zoom: 5
                },
                formZoom: {
                    maxZoom: 100
                }
            },
            mounted() {
                this.bimViewerFn()
            },
            methods: {
                // 初始化模型
                bimViewerFn() {
                    this.bimViewer = new MyViewer({
                        serverUrl: '/RailUnit/',
                        containerElement: document.getElementById('viewer'),
                        nodeVisible: false
                    })
                    this.bimViewer.loadModel2('jianzhu')
                },
                // 设置旋转速度和缩放速度
                submitSpeed () {
                    const { spin, zoom } = this.formSpeed
                    let res = this.bimViewer.operatorSetting(spin, zoom);
                },
                // 设置最大缩放距离
                submitDIST () {
                    const { maxZoom } = this.formZoom
                    console.log(maxZoom, '设置最大缩放距离');
                    // this.bimViewer.setMaxZoomDistance(maxZoom);
                    this.bimViewer.setFarestZoomDistance(maxZoom)
                },
                // 取消最大缩放距离
                cancelKm () {
                    // this.bimViewer.cancelMaxZoomDistance();
                    this.bimViewer.cancelSetFarestZoomDistance()
                },
                // // 设置旋转范围
                // rotationRange () {
                //     this.bimViewer.setRotationRange();
                // },
                // // 取消旋转范围
                // cancelRange () {
                //     this.bimViewer.cancelRotationRange();
                // },
            }
        })
    </script>
</body>
</html>
